CSS-Positionierung
Standardmäßig werden HTML-Elemente im Fluss des HTML-Dokuments positioniert und angezeigt. Die Elemente werden dabei nacheinander in der Reihenfolge dargestellt, wie sie im HTML-Code notiert wurden. Man ist aber nicht auf eine solche Positionierung beschränkt und kann diese mit CSS beeinflussen.
Generische Container div und span
Das div-Element ist dazu gedacht, mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einzuschließen und dient als Basis für das Positionieren, für Effekte und die Animation von HTML-Bereichen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt, d.h. es ist ein sogenanntes block level element. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, Bereiche zu erzeugen, die mit Hilfe von CSS formatiert werden können. div bedeutet division, etwa Abteilung oder Bereich. Das div-Element sollte immer mit einem aussagekräftigen class- oder id-Selektor versehen werden um es mit CSS formatieren zu können.
Der zweite generische Container ist das span-Element, das sich vom div-Element dadurch unterscheidet, dass es ein Inline-Element ist, d.h. es führt nicht zu einem Zeilenumbruch, sondern wird dazu verwendet, innerhalb des Fließtextes spezielle Formatierungen vorzunehmen.
Positionierung mit der Eigenschaft position
Elemente können durch Verwendung der Eigenschaft position aus dem normalen Elementfluss entfernt werden und an jede beliebige Stelle des Viewports positioniert werden. Auf andere Elemente haben positionierte Elemente keinen Einfluss.
position: static
Dies ist die Standardeinstellung für alle Elemente und wird auch verwendet, wenn die position-Eigenschaft nicht notiert wird. Hierbei werden alle Elemente wie gewohnt nacheinander angeordnet, so wie diese im HTML-Dokument notiert wurden.
See the Pen a5d3ca5e00f68f1194004fa399e1d9b6 by Bernd Schiller (@Bernie14153) on CodePen.
position: relative
Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird. Das Verschieben geschieht mittels der CSS-Eigenschaften top, bottom, left und right und entsprechenden Wertangaben.
See the Pen aed5c1fee8b4b305fae1ab3860c37dc5 by Bernd Schiller (@Bernie14153) on CodePen.
position: absolute
Hiermit wird das Element aus dem Dokumentenfluss herausgezogen. Der Nullpunkt für die Positionierung ist die linke obere Ecke des Viewports, außer wenn das Elternelement position: relative gesetzt wurde. Dann richtet sich das Kindelement an dieser Box aus.
See the Pen 0707dce5ced1cc6c904fca0afeb21aa6 by Bernd Schiller (@Bernie14153) on CodePen.
position: fixed
Die feste Positionierung mit position:fixed verhält sich fast genau wie position:absolute, mit einem kleinen, aber feinen Unterschied: Ein fixiertes Element scrollt nicht mit. Absolut positionierte Elemente sind relativ zu einem Bezugspunkt im Dokument und scrollen daher mit. Bei fixierten Elementen ist das anders: Das umgebende Element ist für fixierte Elemente immer das Browserfenster (viewport). Da das Browserfenster selbst nicht mitscrollt, bleiben auf der Seite fixierte Elemente stehen.
See the Pen b23805c35b9337e112fa4c04a8c73aa2 by Bernd Schiller (@Bernie14153) on CodePen.
position: sticky
Elemente mit dieser Eigenschaft behalten ihre Position im Elementfluss, bis sie das obere oder untere Seitenende erreichen und dort „kleben“ bleiben.
See the Pen 03592d1b747d1914b6892270fb24402e by Bernd Schiller (@Bernie14153) on CodePen.
Übereinanderstapeln mit der Eigenschaft z-index
Die Eigenschaft z-index gibt an, in welcher Reihenfolge Elemente auf dem Ausgabemedium dargestellt werden. Elemente mit einem größeren z-index liegen dabei näher am Betrachter. Elemente können nur einen z-index besitzen, falls sie über eine Angabe zu position verfügen, die von static abweicht. Ohne die z-index-Eigenschaft werden alle Elemente, deren Anzeigebereiche sich überlappen, in der Reihenfolge übereinandergelegt, in der sie im HTML-Quelltext definiert sind. Für jedes dieser HTML-Elemente kann ein z-index vergeben werden. Je größer der Wert, umso „höher“ liegt das Element. Ein Element mit z.B. dem z-index 10 überdeckt ein Element mit dem z-index 5.
See the Pen ec8971b670a75d73133ffc09ab782e52 by Bernd Schiller (@Bernie14153) on CodePen.
Zur Vertiefung
Schwebende Boxen für die Positionierung mit float
Eine weitere wichtige Eigenschaft beim Erstellen von Layouts mit CSS ist die Eigenschaft float. Mit dieser Eigenschaft lässt sich ein Element aus dem gewöhnlichen Dokumentenfluss herausnehmen und am rechten oder linken Rand des umfassenden Elements platzieren. Die nachfolgenden Elemente (ohne float) umfließen dann dieses gefloatete Element. Der Klassiker, um die Eigenschaft float in der Praxis zu demonstrieren, ist das Umfließen von Text um ein Bild.
See the Pen Ojdgzp by Bernd Schiller (@Bernie14153) on CodePen.
Die Eigenschaft float wird auch sehr gerne beim Erstellen von Layouts verwendet. In vielen Layouts werden mithilfe von float die Elemente nebeneinander angeordnet. Dabei sind jedoch einige Dinge zu beachten:
See the Pen d4a4930f48377783125e0f4cff971618 by Bernd Schiller (@Bernie14153) on CodePen.
Blockelemente werden normalerweise zum Teil von einem Float verdeckt. Mit Hilfe der clear-Eigenschaft kann festgelegt werden, ob ein Blockelement nur von links floatenden, nur von rechts floatenden oder von keinen floatenden Elementen verdeckt werden darf. Das geschieht dadurch, dass der normale Elementfluss (Blockelemente nehmen die gesamte Breite des Elternelementes ein und stehen infolgedessen untereinander) wieder hergestellt wird. clear:left bedeutet: Das Element darf nicht von nach links floatenden Elementen verdeckt werden. clear:right bedeutet: Das Element darf nicht von nach rechts floatenden Elementen verdeckt werden. clear:both bedeutet: Das Element darf weder von nach links floatenden, noch von nach rechts floatenden Elementen verdeckt werden.
See the Pen 55fb3f139b8aa4594a96ba48465bab7c by Bernd Schiller (@Bernie14153) on CodePen.
Zur Vertiefung
Aufgabe
In dieser Aufgabe wollen wir uns ein erstes Mal am sogenannten "Holy Grail Layout" versuchen. Das ist ein flexibles dreispaltiges Layout mit durchgehendem Header und Footer. Wir machen es uns für den ersten Versuch etwas einfacher, indem wir das Element der Flexibilität weglassen und eine feste Breite von 960px festlegen. Es sind weiter keine Vorgaben zu beachten und es kann mit allen bisher bekannten Techniken gearbeitet werden. Um den Überblick zu erleichtern sollten die 5 Bereiche unterschiedlich eingefärbt werden. Überschriften und Absätze können beliebig mit Inhalt gefüllt werden. Ein Tipp: Nicht verzweifeln und Google nutzen. Die hier auftretenden Fehler und Probleme sind extrem lehrreich.
Code zum Kopieren
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"/> <title>Aufgabe Positionierung</title> <link rel="stylesheet" href="css/style.css"/> <style> * { margin:0; padding: 0; } body { background-color: black; } #wrapper { width: 960px; margin: 0 auto; background-color: white; height: 100vh; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1></h1> </div> <div id="nav"> <ul> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> </ul> </div> <div id="main"> <h2></h2> <p></p> </div> <div id="aside"> <p></p> <p></p> </div> <div id="footer"> <ul> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> </ul> </div> </div> </body> </html>
Das Flexbox-Modell von CSS3
Im Zeitalter des Responsive Webdesign bietet CSS3 nun eine einfachere Alternative zur Positionierung - das Flexbox-Modell. Das Prinzip ist relativ einfach. Man benötigt ein Eltern-Element (den sogenannten Container), bei dem die CSS-Eigenschaft display auf den Wert flex gesetzt wird. Diese Eigenschaft wirkt sich nun auf alle darin enthaltenen Elemente (die Flex-Items) aus.
Die Ausrichtung innerhalb der Flexbox wird mit der Eigenschaft flex-direction angegeben. Für eine horizontale Ausrichtung wird der Wert row verwendet, für eine vertikale Ausrichtung der Wert column.
See the Pen dee99a9e029631cf7e5ee9b02650f60a by Bernd Schiller (@Bernie14153) on CodePen.
Um nun die Flexibilität der entsprechenden Elemente zu erreichen, wird die CSS-Eigenschaft flex verwendet. flex setzt das Verhältnis zwischen den flex-items fest und sagt, wie sich ihre Größe bei einem kleineren oder größeren Viewport verändert. flex ist die Kurzschrift für drei Komponenten: flex grow - flex shrink - flex basis (z.B. flex: 2 1 auto).
flex-grow legt fest, wie ein Flex-Element relativ zu anderen Flex-Elementen innerhalb desselben Containers wächst. Der default-Wert ist 1. Bei 1 haben alle Flex Items dieselbe Größe. (Denselben Effekt erreicht man mit flex: 1;)
flex shrink legt fest, wie sich ein Flex-Element relativ seinen Nachbarn innerhalb desselben Containers verkleinert. Auch für flex shrink ist der default-Wert 1 und bei 1 haben alle Flex Items dieselbe Größe.
Mit flex basis kann kann eine Größe in Pixeln, % oder anderen Größenordnungen angegeben werden – ähnlich wie die Eigenschaft width:33% oder width:200px. Dann ist das der Basis-Raum, der einem Element zur Verfügung steht, bevor der freie Raum verteilt wird. Wird kein Wert angegeben, ist der default-Wert 0.
Eine weitere interessant Eigenschaft ist flex-wrap. Per Vorgabe reihen sich die Flexboxen eines Flex-Containers immer in einer einzigen Zeile auf, egal, wie viele Boxen in die Zeile gepackt werden. Mit flex-wrap:wrap bricht die Zeile um. Im nachfolgenden Beispiel wird dies sichtbar, wenn die Breite der Container (wrap1 und wrap2) auf 100px verrringert wird.
Von großer Bedeutung für den Einsatz im Responsive Webdesign ist die Eigenschaft order. Mit ihr kann die Reihenfolge der Flex-Items verändert werden und so das Design an verschiedene Ausgabemedien angepasst werden. (Im Beispiel im unteren Teil zu beobachten).
See the Pen 1202cd3ed22de14aa03112412aaebbb5 by Bernd Schiller (@Bernie14153) on CodePen.
Die Möglichkeit zur Ausrichtung der Flex-Items im Container bieten die Eigenschaften justify-content, align-items und align-content. justify-content richtet Flexboxen entlang der Hauptachse (links, rechts, zentriert) aus und verteilt den freien Raum zwischen den Flexboxen mit space-between bzw. space-around. align-items richtet Flexboxen an den Kanten oben, unten oder zentriert entlang der zweiten Achse aus (so wie justify-content entlang der Hauptachse). align-content verteilt die Flexboxen anhand ihres Inhalts auf der zweiten Achse (so wie justify-content die Boxen auf der Hauptachse verteilt). Mit flex-direction:row verteilt align-content die Boxen also in der Vertikalen. Einen sichtbaren Effekt hat align-content nur, wenn mehr als eine Reihe bzw. eine Spalte vorhanden ist. Im nachfolgenden Beispiel kann man mit den entsprechenden Angaben experimentieren.
See the Pen c0f2b6bcf4a6fd859ec5a21a62ddd3b4 by Bernd Schiller (@Bernie14153) on CodePen.
Zur Vertiefung
Aufgabe
Es soll nun ein "Holy Grail Layout" mit Hilfe der Möglichkeiten von Flexbox erstellt werden. Als Anhaltspunkt soll folgender Lösungsvorschlag dienen. Die Navigationsleiste werden wir zu einem späteren Zeitpunkt stylen und ebenso die Links im Footer. Das Logo fügen wir ebenso zu einem späteren Zeitpunkt ein. Frei gestaltet werden können das Farbschema und die Proportionen des Layouts.
Code zum Kopieren
<head> <meta charset="utf-8"/> <title>Aufgabe Boxmodell</title> <link rel="stylesheet" href="css/style.css"/> <style> </style> </head> <body> <div id="header"> <div id="logo"></div> <h1>Lorem ipsum dolor sit amet</h1> </div> <div id="wrapper"> <div id="nav"> <ul> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> </ul> </div> <div id="main"> <article id="art1"> <h2>Artikel 1</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </article> <article id="art2"> <h2>Artikel 2</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </article> </div> <div id="aside"> <p id="para1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p id="para2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> </div> </div> <div id="footer"> <ul> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> </ul> </div> </body> </html>